<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>修改密码</title>
    <link rel="stylesheet" href="../../lib/element-ui/theme-chalk/index.css">
    <link rel="stylesheet" href="../../lib/vxe-table/index.css">
    <link rel="stylesheet" href="../../lib/vxe-table-plugin-element/style.css">
    <link rel="stylesheet" href="../../lib/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../../static/css/skins.css">
    <script type="text/javascript" src="../../lib/vue/vue.js"></script>
    <script type="text/javascript" src="../../lib/xe-utils/xe-utils.js"></script>
    <script type="text/javascript" src="../../lib/element-ui/index.js"></script>
    <script type="text/javascript" src="../../lib/vxe-table/index.js"></script>
    <script type="text/javascript" src="../../lib/vxe-table-plugin-element/index.js"></script>
    <script type="text/javascript" src="../../lib/xlsx/xlsx.full.min.js"></script>
    <script type="text/javascript" src="../../lib/vxe-table-plugin-export-xlsx/index.min.js"></script>
    <script type="text/javascript" src="../../lib/xe-ajax/xe-ajax.js"></script>
    <script type="text/javascript" src="../../static/js/jquery.min.js"></script>
    <script type="text/javascript" src="../../lib/layer/layer.min.js"></script>
    <script type="text/javascript" src="../../static/js/MD5/Base64.js"></script>
    <script type="text/javascript" src="../../static/js/MD5/md5.js"></script>
    <script type="text/javascript" src="../../static/js/webApi.js"></script>
    <style type="text/css">
        /*
            找到html标签、body标签，和挂载的标签
            都给他们统一设置样式
        */
        html,
        body,
        #app,
        .el-container {
            /*设置内部填充为0，几个布局元素之间没有间距*/
            padding: 0px;
            /*外部间距也是如此设置*/
            margin: 0px;
            /*统一设置高度为100%*/
            height: 100%;
        }

        .el-main {
            padding: 4px;
        }
    </style>
</head>

<body class="skin-blue">
    <el-container id="app">
        <el-main>
            <el-form :model="formData" :rules="formRules" ref="formData" label-width="80px" label-position="right"
                size="small" style="padding: 5px;">
                <el-form-item label="当前用户" prop="userName">
                    <el-input v-model="formData.userName" placeholder="当前用户" :disabled="disabled"></el-input>
                </el-form-item>
                <el-form-item label="原密码" prop="oldPassword">
                    <el-input type="text" v-model="formData.oldPassword" placeholder="请填写原密码！" maxlength="64"
                        show-password></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newPassword">
                    <el-input type="text" v-model="formData.newPassword" placeholder="请填写新密码！" maxlength="64"
                        show-password></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="chkPassword">
                    <el-input type="text" v-model="formData.chkPassword" placeholder="请再次确认新密码！" maxlength="64"
                        show-password></el-input>
                </el-form-item>
                <el-form-item style="text-align: right;">
                    <el-button type="primary" icon="el-icon-folder" @click="submitEvent('formData')"
                        :disabled="submitDisabled">提交</el-button>
                    <el-button type="warning" icon="el-icon-refresh-right" @click="resetEvent('formData')">重置
                    </el-button>
                </el-form-item>
            </el-form>
        </el-main>
    </el-container>
</body>
<script type="text/javascript">
    window.onload = function () {
        var main = {
            data() {
                var validateNewPass = (rule, value, callback) => {
                    if (value === '') {
                        callback(new Error('请输入新密码'));
                    } else if (value == this.formData.oldPassword) {
                        callback(new Error('新密码与原密码相同!'));
                    } else {
                        if (this.formData.chkPassword !== '') {
                            this.$refs.formData.validateField('chkPassword');
                        }
                        callback();
                    }
                };
                var validateChkPass = (rule, value, callback) => {
                    if (value === '') {
                        callback(new Error('请再次确认新密码'));
                    } else if (value !== this.formData.newPassword) {
                        callback(new Error('两次输入密码不一致!'));
                    } else {
                        callback();
                    }
                };
                return {
                    disabled: true,
                    submitDisabled: false,
                    formData: {
                        userName: '',
                        oldPassword: '',
                        newPassword: '',
                        chkPassword: '',
                        currUserName: ''
                    },
                    formRules: {
                        oldPassword: [{
                                required: true,
                                message: '请填写原密码'
                            },
                            {
                                min: 6,
                                max: 12,
                                message: '长度在6到12个字符'
                            }
                        ],
                        newPassword: [{
                                required: true,
                                validator: validateNewPass,
                                trigger: 'blur'
                            },
                            {
                                min: 6,
                                max: 12,
                                message: '长度在6到12个字符'
                            }
                        ],
                        chkPassword: [{
                                required: true,
                                validator: validateChkPass,
                                trigger: 'blur'
                            },
                            {
                                min: 6,
                                max: 12,
                                message: '长度在6到12个字符'
                            }
                        ]
                    }
                }
            },
            created() {
                this.loginCheck();
            },
            methods: {
                loginCheck() {
                    let that = this
                    webApi('/user/loginCheck', 'get', {}, function (data) {
                        if (data.code == 200) {
                            that.formData.currUserName = data.data.userName;
                            that.formData.userName = data.data.userName;
                        } else {
                            window.location.href = 'sys-login.html';
                        }
                    }, function () {})
                },
                submitEvent(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            this.submitDisabled = true;
                            let oldPassword = this.formData.oldPassword;
                            let newPassword = this.formData.newPassword;
                            let chkPassword = this.formData.chkPassword;
                            let params = Object.assign({
                                oldPassword: Base64.encode(hex_md5(oldPassword).toUpperCase()),
                                newPassword: Base64.encode(hex_md5(newPassword).toUpperCase()),
                                chkPassword: Base64.encode(hex_md5(chkPassword).toUpperCase()),
                            });
                            let that = this
                            webApi('/users/modifyPwd', 'post', params, function (data) {
                                if (data.code == 200) {
                                    that.$XModal.message({
                                        message: data.msg,
                                        status: 'success'
                                    });
                                    that.submitDisabled = false;
                                    //parent.layer.closeAll();
                                } else {
                                    that.$XModal.message({
                                        message: data.msg,
                                        status: 'error'
                                    });
                                    that.submitDisabled = false;
                                }
                            })
                        } else {
                            return false;
                        }
                    });
                },
                resetEvent(formName) {
                    this.$refs[formName].resetFields();
                    this.formData.userName = this.formData.currUserName;
                }
            }
        };
        var app = Vue.extend(main);
        new app().$mount('#app');
    }
</script>

</html>